
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="tutu">
    <meta name="keywords" content="XqTools展示">
    <meta name="description" content="XqTools展示">
    <title>XqTools展示</title>
    <script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="./js/XqTools.js"></script>
    <style type="text/css">
        html,body{width:100%;height:100%;margin: 0;}
        body{}
        #pages{}
        .page{}
        .page img{width: 100%;height: 100%;}
        #navs{position: fixed;bottom: 0;left: 0; right: 0; height: 100px;}
        .nav{float:left;width:25%;height: 100%;text-align: center;line-height: 100px;}
        .nav img{width: 100px;height: 100px;}
    </style>
</head>
<body>
<div id="container" style="display: none;">
    <div id="pages">
        <div id="page_0" class="page" data-color="#FFC1DE"><img src="./img/10.jpg" /></div>
        <div id="page_1" class="page" data-color="#FFBB1C"><img src="./img/11.jpg" /></div>
        <div id="page_2" class="page" data-color="#DBE0AA"><img src="./img/12.jpg" /></div>
        <div id="page_3" class="page" data-color="#67C39C"><img src="./img/13.jpg" /></div>
    </div>
    <div id="navs">
        <div id="nav_0" class="nav" style="background-color: #FFC1DE;"><img src="./img/10_s.jpg" /></div>
        <div id="nav_1" class="nav" style="background-color: #FFBB1C;"><img src="./img/11_s.jpg" /></div>
        <div id="nav_2" class="nav" style="background-color: #DBE0AA;"><img src="./img/12_s.jpg" /></div>
        <div id="nav_3" class="nav" style="background-color: #67C39C;"><img src="./img/13_s.jpg" /></div>
    </div>
</div>
<script type="text/javascript">
    var setWidth = window.document.body.clientWidth;
    var setHeight = window.document.body.clientHeight;
    $(function(){
        var pages = $('#pages').XqTools({
            width:setWidth,
            height:setHeight-100,
            horizontal:true,
            page:true,
            before:function(){
                $("#container").show();
                $(".page").css({width:setWidth,height:setHeight});
            },
            selected:function(index){
                var color = $("#page_"+index).data("color");
                $('#container').css({"background-color": color});
                $('.nav').css({opacity: 0.6});
                $("#nav_"+index).css({opacity: 1});
            }
        });
        $('.nav').on('click',function(){
            pages.setIndex($(this).index())
        })
        $(window).on("resize", function(){
            setWidth = window.document.body.clientWidth;
            setHeight = window.document.body.clientHeight;
            pages.resize(setWidth, setHeight);
        });
    })
</script>
</body>
</html>
